<script src="js/bootstrap.min.js"></script>

<div id="frame">
    <div id="title-bar"  >
        <button id="undo-button" onclick="document.execCommand('undo',false,'');" > </button>
        <button id="redo-button" onclick="document.execCommand('redo',false,'');" > </button>
    </div>

    <div id="task-bar"  >

        <div id="clipboard-menu">
            <div id="paste-container">
                <button id="paste-button" onclick="paste()" > </button>
            </div>
            <div id="copy-cut-container">
                <button id="cut-button" onclick="cut()" > </button>
                <button id="copy-button" onclick="copy()" > </button>
            </div>
        </div>

        <div id="font-menu">
            <div id="f-selector">
                <select id="fs" onchange="document.execCommand('fontName',false,this[this.selectedIndex].value);" style="width: 123px; height: 27px; margin-top: 43px;margin-left:6px;">
                    <option >Calibri</option>
                    <option >BOINK LET</option>
                    <option >Times New Roman</option>
                </select>
                <select id="ts" onchange="document.execCommand('fontSize',false,this.value);" style="width: 48px; height: 27px; margin-left: -5px">
                    <option value="4" >11</option>
                    <option value="5" >16</option>
                    <option value="6" >20</option>
                </select>
            </div>

            <div id="f-style">
                <button id="bold-button" onclick="applyBold()"> </button>
                <button id="italic-button" onclick="applyItalic();" > </button>
                <button id="underline-button" onclick="applyUnderline();" > </button>
            </div>

            <div id="f-color">
                <select id="cs" onchange="document.execCommand('foreColor',false,this.value);" style="width: 15px; height: 26px; margin-left: 142px; margin-top: 10px;">
                    <option value='#000000'>NEGRO</option>
                    <option value='#FF0000'>ROJO</option>
                    <option value='#0000FF'>AZUL</option>
                    <option value='#00FF00'>VERDE</option>
                </select>
            </div>
        </div>

        <div id="paragraph-menu">
            <div id="bottom-icons">
                <button id="justifyLeft-button" onclick="alignTo('justifyLeft');"> </button>
                <button id="justifyCenter-button" onclick="alignTo('justifyCenter');" > </button>
                <button id="justifyRight-button" onclick="alignTo('justifyRight');" > </button>
                <button id="justifyFull-button" onclick="alignTo('justifyFull');"> </button>
            </div>
        </div>
    </div>

    <div id="work-area" contenteditable="true" spellcheck="true"></div>
</div>

<script type="text/javascript">
    clipboard="";   //Este sería nuestro portapapeles XD
    tutorial="<?php echo $tutorial; ?>";
    step="<?php echo $step; ?>";

    function showValue(newValue){
        document.getElementById("range").innerHTML=newValue;
    }
</script>

